<script setup lang='ts'>
// 自定义 规则
interface MarkerItem {
    id: string,
    title: string,
    address: string,
    location: {
        lat: number,
        lng: number,
    },
    tel?: string,
    ad_info: PDC

}
import AliIcon from '@/components/AliIcon/index.vue'
import { ref, defineEmits, defineProps, defineExpose } from 'vue';
import { showToast, navigateTo } from '@/public/index'
import { throttle } from '@/public/index'
import { useMarkerStore } from '@/store/index'
const Map = require('../../../public/amap/mapWx.js')
const markerStore = useMarkerStore();
const props = defineProps({
    isShow: {
        type: Boolean,
        defaule: () => false
    },
    lnglat: {
        type: Object,
        defaule: () => ({})
    }
});

/**
 * @property 变量
 */
const emits = defineEmits(['close', 'clickItem'])
// 搜索的地址
const keyword = ref('');
// input 样式
const inputStyle = ref({
    width: '100%',
    background: '#F4FAFF',
    borderRadius: '16rpx',
    padding: '20rpx 16rpx',
    height: '86rpx',
    flex: 1
})
// data数据
const data = ref<Array<MarkerItem>>([]);
// 选中的id
const markerId = ref('1');
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
const apiSearchList = (): Promise<Array<MarkerItem>> => {
    return new Promise((reslove) => {
        Map.search({
            keyword: keyword.value,
            success: (res: Res) => {
                // reslove(res)
                reslove(res.data)

            },
            fail: (error: { message: string }) => {
                showToast(error.message)
            },
        })
    })

}
// 通过坐标进行反查
const reverseAddressResolution = (lat: number, lng: number) => {
    uni.showLoading({
        title:'记载中',
        mask:true
    })
    Map.reverseGeocoder({
        location: {
            latitude: lat,
            longitude: lng,
        },
        get_poi: 1,
        success: (res: any) => {
            uni.hideLoading();
            // reslove(res.result);
            // 格式化 返回的数据格式
            const obj = {
                address: res.result.address,
                location: res.result.location,
                title: res.result.formatted_addresses.recommend,
                ad_info: res.result.ad_info
            }
            data.value = [obj, ...res.result.pois]
        },
        fail: (error: { message: string }) => {
            uni.hideLoading();
            showToast(error.message)
        },
        
    })
}
/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */

const clickSearch = async () => {
    data.value = await apiSearchList();
    emits('clickItem', data.value[0].location)
}
// 添加标记点
const clickAddMarker = async (marker: MarkerItem) => {
    markerStore.initMarker();
    markerStore.updataMarker({
        toponym: marker.address,
        lat: marker.location.lat + '',
        lng: marker.location.lng + '',
        // 有省显示省 没省显示市
        province: marker.ad_info.province ? marker.ad_info.province : marker.ad_info.city,
        city: marker.ad_info.city,
        district: marker.ad_info.district
    })
    navigateTo('/pages/editMarker/index?type=add');
}
// 点击数据项
const clickDataItem = (item: any) => {
    markerId.value = item.id;
    emits('clickItem', item.location)
}
/**
 * @property 内置方法
 */

defineExpose({
    reverseAddressResolution
})
</script>
<template>
    <up-popup :show="props.isShow" mode="bottom" :round="8" :overlay="false">
        <div class="flex pt-2 pr-3 items-center pl-3">
            <up-input placeholder="请输入内容" :border="'none'" v-model="keyword" :customStyle="inputStyle"
                @confirm="throttle(clickSearch)">
                <template #suffix>
                    <AliIcon icon-name="icon-sousuoicon" @click="clickSearch" />
                </template>
            </up-input>
            <AliIcon icon-name="icon-icon_chahao_outline" font-size="50" @click="emits('close')" />
        </div>
        <div class="w-[100%] h-400 bg-[#fff] pl-3 pr-3 pt-3 flex flex-col" style="border-radius: 12rpx 12rpx 0 0;">

            <div class="w-[100%] flex-1 mt-3 overflow-hidden">
                <scroll-view scroll-y class="w-[100%] h-[100%]">
                    <div class="pl-3 pr-3 fra b-rd-2 pb-2 pt-2" v-for="item in data" :key="item.id"
                        @click="clickDataItem(item)" :class="markerId === item.id && 'item'"
                        style="border-bottom: 2rpx solid #EDEDED;">
                        <div class="flex-1 flex flex-col">
                            <text class="font-size-28">{{ item.title }}</text>
                            <text class="font-size-24">{{ item.address }}</text>
                        </div>
                        <div class="w-200 h-60 b-rd-60rpx font-size-32 fc c-[#fff]  bg-[#275EFFFF]"
                            @click="clickAddMarker(item)">
                            添加
                        </div>
                    </div>
                </scroll-view>
            </div>
        </div>
    </up-popup>
</template>
<style lang="scss" scoped>
.item {
    background-color: #275EFF14;
}
</style>